import React,{useState,useContext} from 'react';
const ThemeContext = React.createContext();//Provider
function App(){
	//1.在最外层的App中定义一个状态，默认值是light,返回一个数组，1元素是状态light,2元素改变theme的方法
	let [theme,setTheme] = useStat('light');
	//定义一个value对象，然后作为属性传递给ThemeContext.Provider
	let value = {theme,setTheme};
	return (
		<ThemeContext.Provider value={value}>
			<ToolBar/>
		</ThemeContext.Provider>
	)
}
function ToolBar(){
	return <ThemeButton/>
}
/**
 * 要想在组件中获取 Context值 
 * 类组件 添另一个静态属性 static contextType = ThemeContext,然后在组件内就可以通过this.context
 * 函数组件 可以ThemeContext.Consumer来获取Context的值 <ThemeContext.Consumer>{value}</ThemeContext.Consumer>
 */
function ThemeButton(){
	//通过 调用useContext这人hook来返回当前的Context的值
	const {theme,setTheme} = useContext(ThemeContext);
	return <button onClick={()=>setTheme(theme==='light'?'dark':'light')}>{theme}</button>
}
export default App;
